<template>
  <div>
    <h1>app</h1>
    <!-- 计算器  加法1   减法1  如果是奇数 加5  如果是偶数减5 -->
    <h1>{{ num }}</h1>
    <button @click="add">加 1</button>
    <button @click="dis">减 1</button>
    <button @click="oddAdd">如果是奇数 加1</button>
    <button @click="evenDis">如果是偶数 减 1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    add() {
      this.num += 1;
    },
    dis() {
      this.num -= 1;
    },
    oddAdd() {
      // 先判断奇数偶数
      if (this.num % 2 == 1) {
        // this.num += 1;
        this.add();
        // this.oddAdd判断完奇数和偶数后通过直接调用this.add间接的更改了 num中的值
      }
    },
    evenDis() {
      if (this.num % 2 == 0) {
        // this.num -= 1;
        this.dis();
      }
    },
  },
};
/* 
vuex是对vue应用中的多个组件的共享状态进行集中管理的

state 管理状态的对象  {key:value}  相当于组件中的data    num
mutations 对象 存储的是直接更改state数据的方法   add dis
actions 对象  存储的是间接更改state中数据的方法  oddAdd evenDis

计算器改为vuex







*/
</script>

<style lang="scss" scoped>
button {
  margin-right: 20px;
}
</style>